import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:wallpaper/components/list_title/my_list_title.dart';
import 'package:wallpaper/components/list_title/my_list_title_model.dart';
import 'package:wallpaper/generated/l10n.dart';
import 'package:wallpaper/pages/login/login.dart';
import 'package:wallpaper/pages/theme/icon_page.dart';
import 'package:wallpaper/pages/theme/localizations_page.dart';
import 'package:wallpaper/pages/theme/theme_page.dart';
import 'package:wallpaper/themes/theme_provider.dart';

class SettingPage extends StatefulWidget {
  const SettingPage({super.key});

  @override
  State<SettingPage> createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  bool isShow = false;
  ScrollController scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    scrollController.addListener(() {
      if (scrollController.offset > 50) {
        setState(() {
          isShow = true;
        });
      } else {
        setState(() {
          isShow = false;
        });
      }
    });
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    List<MyListTitleModel> list = [
      MyListTitleModel(
        title: S.of(context).theme,
        leading: Icon(Icons.color_lens),
        route: ThemePage(),
      ),
      MyListTitleModel(
          title: S.of(context).icons,
          leading: Icon(Icons.image),
          route: IconPage()),
      MyListTitleModel(
          title: S.of(context).internationalization,
          leading: Icon(Icons.language),
          route: LocalizationsPage()),
      MyListTitleModel(
        title: S.of(context).about,
        leading: Icon(Icons.info),
      ),
      MyListTitleModel(
          title: S.of(context).login,
          leading: Icon(Icons.login),
          route: Login()),
    ];

    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 40,
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        surfaceTintColor: Theme.of(context).colorScheme.primaryContainer,
        title: isShow
            ? Row(
                children: [
                  Image.asset('lib/assets/images/icon.png',
                      width: 30, height: 30),
                  const SizedBox(width: 10),
                  Text(
                    'Zsnoin能',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              )
            : null,
        actions: [
          IconButton(
            onPressed: () {
              Provider.of<ThemeProvider>(context, listen: false).toggleTheme();
            },
            icon: Icon(
              Icons.brightness_4,
              color: Theme.of(context).colorScheme.inversePrimary,
            ),
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: CustomScrollView(
          controller: scrollController,
          slivers: <Widget>[
            SliverToBoxAdapter(child: _buildTitle()),
            SliverToBoxAdapter(child: SizedBox(height: 10)),
            SliverToBoxAdapter(child: _buildCard()),
            SliverToBoxAdapter(child: SizedBox(height: 10)),
            _iconList(),
            SliverToBoxAdapter(child: SizedBox(height: 10)),
            SliverToBoxAdapter(child: MyListTitle(list: list)),
            SliverToBoxAdapter(child: SizedBox(height: 60)),
          ],
        ),
      ),
    );
  }

  Widget _buildTitle() {
    return Container(
      padding: const EdgeInsets.all(10),
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.primaryContainer,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Image(
                width: 60,
                height: 60,
                image: const AssetImage('lib/assets/images/icon.png'),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      'Zsnoin能',
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 2),
                    Container(
                      width: 150,
                      padding: EdgeInsets.only(bottom: 2),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text('Lv.10'),
                          Icon(
                            Icons.whatshot_outlined,
                            size: 18,
                            color: Theme.of(context).colorScheme.primary,
                          ),
                        ],
                      ),
                    ),
                    Container(
                      width: 150,
                      height: 5,
                      decoration: BoxDecoration(
                        color: Theme.of(context).colorScheme.primary,
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          Icon(Icons.chevron_right,
              color: Theme.of(context).colorScheme.primary),
        ],
      ),
    );
  }

  Widget _iconList() {
    return SliverGrid(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
        crossAxisSpacing: 10.0,
        mainAxisSpacing: 10.0,
      ),
      delegate: SliverChildBuilderDelegate(
        childCount: 8,
        (BuildContext context, int index) {
          return Material(
            color: Theme.of(context).colorScheme.primaryContainer,
            borderRadius: BorderRadius.circular(10),
            child: InkWell(
              borderRadius: BorderRadius.circular(10), // 设置水波纹的圆角
              onTap: () {
                // 点击逻辑
                print('点击了图标 ${index + 1}');
              },
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset('lib/assets/icon/${index + 1}.png', width: 30),
                    Text('${S.of(context).icon}${index + 1}'),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }

  Widget _buildCard() {
    return SizedBox(
      height: 200,
      child: PageView(
        children: [
          Container(
            height: 100,
            // 背景图片
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(10)),
              image: DecorationImage(
                image: AssetImage('lib/assets/images/bg.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Container(
            height: 100,
            // 背景图片
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(10)),
              image: DecorationImage(
                image: AssetImage('lib/assets/images/bg.gif'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
